<template>
    <t-dialog v-model:visible="visible" :on-confirm="onConfirm" :closeBtn="false" header="产品新增">
        <t-form ref="form" :data="formData" :rules="rules" @reset="onReset" @submit="onSubmit" label-width="70px" resetType='initial'>
            <t-form-item  label="产品名称" name="name">
                <t-input v-model="formData.name" placeholder="产品名称"></t-input>
            </t-form-item>

            <t-form-item  label="产品介绍" name="description">
                <t-textarea v-model="formData.description" placeholder="产品描述"></t-textarea>
            </t-form-item>
            <t-form-item label="接入协议" name="access">
                
                    <t-radio-group variant="primary-filled"  v-model="formData.access">
                    <t-radio-button value="45g">4/5G</t-radio-button>
                    <t-radio-button value="wifi">wifi</t-radio-button>
                    <t-radio-button value="lora">LoRa</t-radio-button>
                    <t-radio-button value="nbiot">NB-IoT</t-radio-button>
    
                    </t-radio-group>
                
            </t-form-item>
            <t-form-item label="数据格式" name="data">
                
                <t-radio-group variant="primary-filled" v-model="formData.data">
                <t-radio-button value="mqtt">mqtt</t-radio-button>
                <t-radio-button value="modbus">modbus</t-radio-button>
                <t-radio-button value="coap">coap</t-radio-button>
                <t-radio-button value="json">json</t-radio-button>

                </t-radio-group>
            
        </t-form-item>

        <t-form-item label="传输方式" name="method">
                
                <t-radio-group variant="primary-filled" v-model="formData.method">
                <t-radio-button value="tcp">tcp</t-radio-button>
                <t-radio-button value="udp">udp</t-radio-button>
             

                </t-radio-group>
            
        </t-form-item>
        </t-form>
    </t-dialog>
</template>
<script setup>
import {reactive, ref} from 'vue';
import { addProduct } from '@/api/api';
import { NotifyPlugin, } from 'tdesign-vue-next';
const formData = reactive({
    name:'',
    description:'',
    access:'45g',
    method:'tcp',
    data:'mqtt'
})
const form = ref()
const visible = ref(false);
const checkName = () => {
    if(formData.name===''){
        return { result: false, message: '名称不能为空', type: 'error' }
    }
    return { result: true, type: 'success' }
}

const rules = {
  name: [
  { validator: checkName, },
]
};


const onSubmit = ({ validateResult, firstError, e }) => {
  e.preventDefault();
  if (validateResult === true) {
    let data = {
        name:formData.name,
        desc:formData.description,
        access:formData.access,
        data:formData.data,
        method:formData.method,
    }
    addProduct(data).then(res=>{
        if(res.code===200){
            NotifyPlugin.success({ title: '成功', content: '产品新增成功', closeBtn:true })
            visible.value = false
        }
    })
  } 
};


const onReset = () => {
    form.value.reset();
};


 


 const onConfirm = () => {
    visible.value = false;
    form.value.submit();
 }

const open = () =>{
    form.value.reset();
    visible.value = true
}


defineExpose({
    open,
})

</script>